<template>
  <div class="bg-img" ref="bg-img">
    <!-- index -->
    <HeadTop class="headTop" v-if="$store.state.device == 'pc'"></HeadTop>
    <MobileNav v-else></MobileNav>
    <router-view></router-view>
    <BottomModel ref="bottomModel" class="bottomModel"></BottomModel>
    <BackTop></BackTop>
  </div>
</template>

<script>
import { throttle } from "@/utils/index.js";
import HeadTop from "@/components/head-top.vue";
import BottomModel from "@/components/bottom-model.vue";
import BackTop from "@/components/back-top.vue";
import MobileNav from "@/components/mobile-nav.vue";
export default {
  components: { HeadTop, BottomModel, BackTop, MobileNav },
  data() {
    return {};
  },
  methods: {
    changeScrollTop(e) {
      this.$store.commit("setScrollTop", e.currentTarget.scrollY);
    }
  },
  beforeDestroy() {
    $(window).off("scroll");
  },
  mounted() {
    $(window).on("scroll", throttle(this.changeScrollTop, 300));
    const bottomModelDom = this.$refs.bottomModel.$el;
    this.$refs["bg-img"].style["padding-bottom"] =
      bottomModelDom.offsetHeight + "px";
  }
};
</script>

<style scoped lang="scss">
.bg-img {
  background-image: url("../assets/images/sjtudoorBG.jpg");
  background-size: 100% auto;
  min-height: 100vh;
  background-repeat: no-repeat;
  position: relative;
  background-color: #f8f2ea;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    padding-top: 60px;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    padding-top: 60px;
  }
  .headTop {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  .bottomModel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
